import React, { useState, useEffect } from 'react';
import './App.css';
import {
  Form,
  Input,
  Tooltip,
  Icon,
  Cascader,
  Select,
  Row,
  Col,
  Checkbox,
  Button,
  AutoComplete,
} from 'antd';
const { Option } = Select;
const AutoCompleteOption = AutoComplete.Option;

const residences = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
    children: [
      {
        value: 'hangzhou',
        label: 'Hangzhou',
        children: [
          {
            value: 'xihu',
            label: 'West Lake',
          },
        ],
      },
    ],
  },
  {
    value: 'jiangsu',
    label: 'Jiangsu',
    children: [
      {
        value: 'nanjing',
        label: 'Nanjing',
        children: [
          {
            value: 'zhonghuamen',
            label: 'Zhong Hua Men',
          },
        ],
      },
    ],
  },
];



function App(props){
  //Form.create  包裹函数后，会注入一个参数，第一个参数，随便命名，我们暂且命名为props，比较合理一些
  const [confirmDirty, setConfirmDirty] = useState(false);
  const [autoCompleteResult, setAutoCompleteResult] = useState([]);


  const handleSubmit = e => {
    e.preventDefault();
    props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        console.log('表单内的数据: ', values);
      }
    });
  }

  const handleConfirmBlur = e => {
    const { value } = e.target;
    setConfirmDirty(confirmDirty || !!value)
    // this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };

  const compareToFirstPassword = (rule, value, callback) => {
    const { form } = props;
    if (value && value !== form.getFieldValue('password')) {
      callback('Two passwords that you enter is inconsistent!');
    } else {
      callback();
    }
  };

  const validateToNextPassword = (rule, value, callback) => {
    const { form } = props;
    if (value && confirmDirty) {
      form.validateFields(['confirm'], { force: true });
    }
    callback();
  };

  const handleWebsiteChange = value => {
    let autoCompleteResult;
    if (!value) {
      autoCompleteResult = [];
    } else {
      autoCompleteResult = ['.com', '.org', '.net'].map(domain => `${value}${domain}`);
    }
    setAutoCompleteResult(autoCompleteResult)
  };

  const { getFieldDecorator } = props.form;

  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };
  const tailFormItemLayout = {
    wrapperCol: {
      xs: {
        span: 24,
        offset: 0,
      },
      sm: {
        span: 16,
        offset: 8,
      },
    },
  };
  const prefixSelector = getFieldDecorator('prefix', {
    initialValue: '86',
  })(
    <Select style={{ width: 70 }}>
      <Option value="86">+86</Option>
      <Option value="87">+87</Option>
    </Select>,
  );

  const websiteOptions = autoCompleteResult.map(website => (
    <AutoCompleteOption key={website}>{website}</AutoCompleteOption>
  ));

  return (<Form {...formItemLayout} onSubmit={handleSubmit}>
    <Form.Item label="E-mail">
      {getFieldDecorator('email', {
        rules: [
          {
            type: 'email',
            message: 'The input is not valid E-mail!',
          },
          {
            required: true,
            message: 'Please input your E-mail!',
          },
        ],
        
      })(<Input />)}
    </Form.Item>
    <Form.Item label="Password" hasFeedback>
      {getFieldDecorator('password', {
        rules: [
          {
            required: true,
            message: 'Please input your password!',
          },
          {
            validator: validateToNextPassword,
          },
        ],
      })(<Input.Password />)}
    </Form.Item>
    <Form.Item label="Confirm Password" hasFeedback>
      {getFieldDecorator('confirm', {
        rules: [
          {
            required: true,
            message: 'Please confirm your password!',
          },
          {
            validator: compareToFirstPassword,
          },
        ],
      })(<Input.Password onBlur={handleConfirmBlur} />)}
    </Form.Item>
    <Form.Item
      label={
        <span>
          Nickname&nbsp;
          <Tooltip title="What do you want others to call you?">
            <Icon type="question-circle-o" />
          </Tooltip>
        </span>
      }
    >
      {getFieldDecorator('nickname', {
        rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
      })(<Input />)}
    </Form.Item>
    <Form.Item label="Habitual Residence">
      {getFieldDecorator('residence', {
        initialValue: ['zhejiang', 'hangzhou', 'xihu'],
        rules: [
          { type: 'array', required: true, message: 'Please select your habitual residence!' },
        ],
      })(<Cascader options={residences} />)}
    </Form.Item>
    <Form.Item label="Phone Number">
      {getFieldDecorator('phone', {
        rules: [{ required: true, message: 'Please input your phone number!' }],
      })(<Input addonBefore={prefixSelector} style={{ width: '100%' }} />)}
    </Form.Item>
    <Form.Item label="Website">
      {getFieldDecorator('website', {
        rules: [{ required: true, message: 'Please input website!' }],
      })(
        <AutoComplete
          dataSource={websiteOptions}
          onChange={handleWebsiteChange}
          placeholder="website"
        >
          <Input />
        </AutoComplete>,
      )}
    </Form.Item>
    <Form.Item label="Captcha" extra="We must make sure that your are a human.">
      <Row gutter={8}>
        <Col span={12}>
          {getFieldDecorator('captcha', {
            rules: [{ required: true, message: 'Please input the captcha you got!' }],
          })(<Input />)}
        </Col>
        <Col span={12}>
          <Button>Get captcha</Button>
        </Col>
      </Row>
    </Form.Item>
    <Form.Item {...tailFormItemLayout}>
      {getFieldDecorator('agreement', {
        valuePropName: 'checked',
      })(
        <Checkbox>
          I have read the <a href="">agreement</a>
        </Checkbox>,
      )}
    </Form.Item>
    <Form.Item {...tailFormItemLayout}>
      <Button type="primary" htmlType="submit">
        Register
      </Button>
    </Form.Item>
  </Form>
);
}


export default Form.create({ name: 'register' })(App);
